<template>
  <tr @click="$emit('focus', row, index)" :class="{ 'selected-row': isSelected }">
    <td
        v-for="header in headers"
        :key="header.field"
        :style="getHeaderStyle(header)"
    >

      <component
          :is="getCellComponent(header.cellType)"
          :model-value="row[header.field]"
          @update:model-value="(value) => handleCellUpdate(header.field, value)"
          v-bind="getCellProps(header)"
          @focus="() => handleCellFocus(header.field)"
          @blur="handleCellBlur"
          @input="(value) => handleCellInput(header.field, value)"
      />
    </td>
  </tr>
</template>

<script>

import {getCellComponent} from "@/components/Forwarder/cellComponents";

export default {
  name: 'TableRow',
  props: {
    row: {
      type: Object,
      required: true
    },
    headers: {
      type: Array,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update', 'focus', 'blur', 'input'],
  setup(props, { emit }) {



    const getHeaderStyle = (header) => {
      return header.width ? { width: header.width, minWidth: header.width } : {}
    }

    const getCellProps = (header) => {
      return {
        'value-mapping': header.cellMappings,
        'column-width': header.width,
        'comboxlist': header.comboxlist,
        'searchObj': header.searchObj
      }
    }

    const handleCellUpdate = (field, value) => {
      emit('update', props.index, field, value)
    }

    const handleCellFocus = (field) => {
      emit('focus', props.index, field)
    }

    const handleCellBlur = () => {
      emit('blur')
    }

    const handleCellInput = (field, value) => {
      emit('input', props.index, field, value)
    }

    return {
      getCellComponent,
      getHeaderStyle,
      getCellProps,
      handleCellUpdate,
      handleCellFocus,
      handleCellBlur,
      handleCellInput
    }
  }
}
</script>
